Created: 11/03/2015
By: thebestdesigns
Email: prince80946@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priorty. You will need some knowledge of HTML/CSS to edit the theme.
First of all this is CSS3 Responsive Mega Menu. Very easy implementaion and customization. This menu with predefined 30 color styles. All of the information within the main content area is nested within a div with an class of "mega-menu". To use this menu our website you just need to copy the html code + <head> section code which contains CSS or js files links in our html page and also put the four folders (css, fonts, js and imges) in our website public folder to use this menu. The general template structure is the same throughout the template. Here is the general structure.
First attach the 3 main files in the head section of the html page.
<head> <!-- menu stylesheet file -- > <link href="css/mega_menu.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/mega_menu.min.js"></script> </head>
mega_menu.css is main menu css file which contain the
whole structure of the menu
jquery-1.11.3.min.js is latest version of jquery which
used for menu effects.
mega_menu.js is used for main menu script file.
minify versions of css and scripts also include with the
.min.css, .min.js extension
minify versions faster then normal versions.
Also add the menu jQuery changeable options inside head section. Add this script block.
<script>
jQuery(document).ready(function ($) {
$('#menu-1').megaMenu({
// DESKTOP MODE SETTINGS
logo_align : 'left', // align the logo left or right. options (left) or (right)
links_align : 'left', // align the links left or right. options (left) or (right)
socialBar_align : 'left', // align the socialBar left or right. options (left) or (right)
searchBar_align : 'right', // align the search bar left or right. options (left) or (right)
trigger : 'hover', // show drop down using click or hover. options (hover) or (click)
effect : 'fade', // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
effect_speed : 400, // drop down show speed in milliseconds
sibling : true, // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
outside_click_close : true, // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
top_fixed : false, // fixed the menu top of the screen. options (true) or (false)
sticky_header : false, // menu fixed on top when scroll down down. options (true) or (false)
sticky_header_height: 200, // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
menu_position : 'horizontal', // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
full_width : false, // make menu full width. options (true) or (false)
// MOBILE MODE SETTINGS
mobile_settings : {
collapse : false, // collapse the menu on click. options (true) or (false)
sibling : true, // hide the others showing drop downs when click on current drop down. options (true) or (false)
scrollBar : true, // enable the scroll bar. options (true) or (false)
scrollBar_height : 400, // scroll bar height in px value. this option works if the scrollBar option true.
top_fixed : false, // fixed menu top of the screen. options (true) or (false)
sticky_header : false, // menu fixed on top when scroll down down. options (true) or (false)
sticky_header_height: 200 // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
}
});
});
</script>
Note: if you only initialize the menu. use script like this.
('#menu-1') . This is unique ID of the menu. match with container id
<script> jQuery(document).ready(function ($) { $('#menu-1').megaMenu({}); }); </script>
<!-- menu start --> <nav id="menu-1" class="mega-menu"></nav> <!-- menu end -->
If you want second instance of the menu. just add the menu container unique ID. like (id="menu-2"). after that add the same id inside script block. here is the below expample. i change the (menu-1) id to (menu-2).
<script> jQuery(document).ready(function ($) { $('#menu-2').megaMenu({}); }); </script>
<!-- menu start --> <nav id="menu-2" class="mega-menu"></nav> <!-- menu end -->
logo_align: 'left' | This option used for align the menu logo left or right side of the screen. Options (left) or (right). |
links_align: 'left' | This option used for align the menu link elements left or right side of the screen. Options (left) or (right). |
socialBar_align: 'left' | This option used for align the social bar icons left or right side of the screen. Options (left) or (right). |
searchBar_align: 'right' | This option used for align the search bar left or right side of the screen. Options (left) or (right). |
trigger: 'hover' | This option used for drop down. Showing drop down with mouse hover or mouse click. Options (hover) or (click). |
effect: 'fade' |
This option used for drop down animation effects. There are up to 6 effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right). |
effect_speed: 400 |
This option used for showing drop down animation speed. Value in milliseconds. |
sibling: true |
This option used for hide the others showing drop down instead of current drop down. This option works with click trigger. Options (true) or (false). |
outside_click_close: true | This option used for hide the showing drop downs when user click outside of the menu. like click on any other scree area. This option works with click trigger. Options (true) or (false). |
top_fixed: false |
This option fixed the menu always top of the screen. Options (true) or (false). |
sticky_header: false |
This option fixed the menu top of the screen when user scroll down the screen top to bottom. Options (true) or (false). |
sticky_header_height: 200 | This option works if above option sticky_header:true. Activate sticky header when meet the height. Option change the height in px value. |
menu_position: 'horizontal' | This option used for change the menu position. Options (horizontal), (vertical-left) or (vertical-right). |
full_width: false | This option used for make the full width. Options (true) or (false). |
Mobile settings
collapse:
false |
This option used for collapse the menu and show the hamburger icon or click on icon to show the menu bar. Options (true) or (false). |
sibling: true |
This option used for hide the others showing drop down instead of current drop down. This option works with click trigger. Options (true) or (false). |
scrollBar: true |
This option used for enable the scroll bar. This option stop the drop downs showing long height. Options (true) or (false). |
scrollBar_height: 400 |
This is scroll bar max height in px unit. Drop downs stop to show long when meet the height. Options in integer value. |
top_fixed: false |
This option fixed the menu always top of the screen. Options (true) or (false). |
sticky_header: false |
This option fixed the menu top of the screen when user scroll down the screen top to bottom. Options (true) or (false). |
sticky_header_height: 200 |
This option works if above option sticky_header:true. Activate sticky header when meet the height. Option change the height in px value. |
Create a menu container.With unique ID or class mega-menu
<!-- menu start -->
<nav id="menu-1" class="mega-menu">
<!-- content -->
</nav>
<!-- menu end -->
Create a menu top links elements.
<!-- menu start -->
<nav id="menu-1" class="mega-menu">
<!-- menu list items container -->
<section class="menu-list-items">
<!-- menu logo -->
<ul class="menu-logo"></ul>
<!-- menu links -->
<ul class="menu-links">
<!-- active class -->
<li class="active"><a href="#"> <i class="fa fa-home"></i> Active</a></li>
<li><a href="#">Drop Down <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Mega Menu <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Grid <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Tab Bar <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Images <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Contact <i class="fa fa-angle-down fa-indicator"></i></a></li>
</ul>
<!-- menu social bar -->
<ul class="menu-social-bar"></ul>
<!-- menu search bar -->
<ul class="menu-search-bar"></ul>
</section>
</nav>
<!-- menu end -->
add the icon
<i class="fa fa-circle-o-notch"></i>
add the image
<img src="images/ufo.png" alt="logo">
<!-- menu logo -->
<ul class="menu-logo">
<li>
<a href="#"> <i class="fa fa-circle-o-notch"></i> Company Logo
<!--<img src="images/ufo.png" alt="logo">--> </a>
</li>
</ul>
<i class="fa fa-angle-down"></i>
Source: http://fortawesome.github.io/Font-Awesome/icons/
If you align the icons right side. you must add class "fa-indicator"<i class="fa fa-angle-down fa-indicator"></i>
<li class="active"> <!-- content--> </li>
<ul class="menu-links">
<!-- active class -->
<li class="active"><a href="#"> <i class="fa fa-home"></i> Active</a></li>
<li><a href="#">Drop Down <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Mega Menu <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Grid <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Tab Bar <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Images <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Contact <i class="fa fa-angle-down fa-indicator"></i></a></li>
</ul>
<!-- drop down secondIf you align the drop down left side. add class "left-side"
<ul class="drop-down-multilevel">
<!-- content -->
</ul>
<!-- drop down left side --> <!-- add class left-side -->
<ul class="drop-down-multilevel left-side">
<!-- content -->
</ul>
<!-- drop down multilevel -->
<ul class="drop-down-multilevel">
<li><a href="#">Items Right Side <i class="fa fa-angle-right fa-indicator"></i> </a>
<!-- drop down second level -->
<ul class="drop-down-multilevel">
<!-- content -->
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Items Left Side <i class="fa fa-angle-left fa-indicator"></i> </a>
<!-- drop down left side --> <!-- add class left-side -->
<ul class="drop-down-multilevel left-side">
<!-- content -->
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<!-- drop down full width -->
<div class="drop-down grid-col-12">
<!-- content -->
</div>
<h4>List Items</h4>List items with description HTML structure
<ul>
<li><a href="#"> NetTuts </a></li>
<li><a href="#"> VectorTuts </a></li>
<li><a href="#"> PsdTuts </a></li>
<li><a href="#"> PhotoTuts </a></li>
<li><a href="#"> ActiveTuts </a></li>
<li><a href="#"> Creattica </a></li>
</ul>
<h4>List + Description</h4>Images with description HTML structure
<ul>
<li class="list-description"><a href="#"> ThemeForest <span>Description</span> </a></li>
<li class="list-description"><a href="#"> GraphicRiver <span>Description</span> </a></li>
<li class="list-description"><a href="#"> ActiveDen <span>Description</span> </a></li>
<li class="list-description"><a href="#"> VideoHive <span>Description</span> </a></li>
</ul>
<h4>Images + Description</h4>List items with icons HTML structure
<ul>
<li class="image-description"><a href="#"> <img src="images/icons/brush_64px.png" alt="list images"> ThemeForest <span>Description</span> </a></li>
<li class="image-description"><a href="#"> <img src="images/icons/palette_2_64px.png" alt="list images"> GraphicRiver <span>Description</span> </a></li>
<li class="image-description"><a href="#"> <img src="images/icons/palette_64px.png" alt="list images"> ActiveDen <span>Description</span> </a></li>
</ul>
<h4>List With Icons</h4>
<ul>
<li><a href="#"> <i class="fa fa-leaf"></i> Design </a></li>
<li><a href="#"> <i class="fa fa-pie-chart"></i> Logo </a></li>
<li><a href="#"> <i class="fa fa-foursquare"></i> Flash </a></li>
<li><a href="#"> <i class="fa fa-flash"></i> Illustration </a></li>
</ul>
Tab bar drop down html structure
<!-- drop down tab bar -->
<ul class="drop-down-tab-bar"></ul>
<!-- drop down full width -->
<ul class="drop-down-tab-bar grid-col-12">
<li><a href="#"> <i class="fa fa-tags"></i> Tab Bar <i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Motion Graphics<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Game Development<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Business<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Illustration<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Web Design<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Mac Computer Skills<i class="fa fa-angle-right fa-indicator"></i> </a></li>
</ul>
sapce-0 | This class used for remove the div or any other elements padding or margin. |
offset-1, offset-2, offset-3, offset-4, offset-5 |
These classes used for shift the drop down
slightly left side of the screen. HTML structure <!-- drop down with grid column 6 + offset-3 -->CSS structure .offset-1 { margin-left : 100px; } |
<!-- menu social bar -->
<ul class="menu-social-bar">
<li data-color="blue"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li data-color="sky-blue"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li data-color="orange"><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
<li data-color="red"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
</ul>
<!-- menu search bar -->
<ul class="menu-search-bar">
<li>
<form method="post" action="#">
<label>
<input name="menu_search_bar" placeholder="Search" type="search">
<i class="fa fa-search"></i>
</label>
</form>
</li>
</ul>
offset-1-vertical offset-2-vertical offset-3-vertical offset-4-vertical offset-5-vertical |
These classes used for slightly shift the drop down bottom to
top of the screen. when menu on position (vertical-left) or
(vertical-right). HTML structure <div class="drop-down grid-col-6 offset-5-vertical"><!-- content --></div>CSS structure .offset-1-vertical { margin-top : -100px !important; } |
data-color="grey">
<nav id="menu-1" class="mega-menu" data-color="grey">
<!--content-->
</nav>
data-color="blue-grey" | |
data-color="blue-grey-invert" | |
data-color="brown" | |
data-color="brown-invert" | |
data-color="cyan" | |
data-color="cyan-invert" | |
data-color="deep-orange" | |
data-color="deep-orange-invert" | |
data-color="deep-purple" | |
data-color="deep-purple-invert" | |
data-color="grey" | |
data-color="grey-invert" | |
data-color="indigo" | |
data-color="indigo-invert" | |
data-color="light-blue" | |
data-color="light-blue-invert" | |
data-color="light-green" | |
data-color="light-green-invert" | |
data-color="lime" | |
data-color="lime-invert" | |
data-color="orange" | |
data-color="orange-invert" | |
data-color="pink" | |
data-color="pink-invert" | |
data-color="purple" | |
data-color="purple-invert" | |
data-color="red" | |
data-color="red-invert" | |
data-color="teal" | |
data-color="teal-invert" |
Open the nav-form.php file and change the email with your email (where you want to received the emails form others users). Example change this email (example@gmail.com) to (your@gmail.com);
version 1.0
version 2.0
version 3.0
version 4.0
version 5.0
version 6.0
version 7.0
version 8.0
Once again, thank you so much for purchasing this item. That's it! Enjoy your file and don't forget to rate it! If you want to rate it with less than 5 stars, please let me know first what's the problem with the file and how can I improve it for you. Have a good day! :).
thebestdesigns